<template>
  <div>
    <template>
      <div>
        <el-card style="margin-bottom:20px ">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="司机账号:" style="width: 400px">
              <el-input v-model="form.account" placeholder="司机账号"></el-input>
            </el-form-item>
            <el-form-item label="司机姓名:" style="width: 400px">
              <el-input v-model="form.name" placeholder="司机姓名"></el-input>
            </el-form-item>
            <el-form-item label="司机手机号:" style="width: 400px">
              <el-input v-model="form.phone" placeholder="司机手机号"></el-input>
            </el-form-item>
            <el-form-item label="所属机构:" style="width: 400px">
              <el-cascader
                  v-model="form.agentId"
                  :options="options"
                  :props="props"
                  @change="handleChange"
                  :filterable="true"
                  placeholder="所属机构"
                  emitPath="false"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="danger" @click="white">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-table
            :data="tableData"
            style="width: 100%; font-size: 12px"
            align="center"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="account" label="司机账号"> </el-table-column>
          <el-table-column prop="name" label="司机姓名"> </el-table-column>
          <el-table-column prop="mobile" label="司机手机号"> </el-table-column>
          <el-table-column prop="agency.name" label="所属机构">
          </el-table-column>
          <el-table-column
              prop="workStatus"
              label="工作状态"
              :formatter="formatter"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-link type="primary" @click="look(row.userId)">查看</el-link>
              <el-link
                  type="primary"
                  style="margin-left: 10px"
                  @click="configuration(row)"
              >配置车辆</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="hanlepagesiz"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
          title="配置车辆"
          :visible.sync="dialogVisible"
          width="50%"
          @close="close"
      >
        <el-descriptions>
          <el-descriptions-item label="司机编号">{{
              info.userId
            }}</el-descriptions-item>
          <el-descriptions-item label="司机名称">{{
              info.name
            }}</el-descriptions-item>
          <el-descriptions-item label="司机电话">{{
              info.mobile
            }}</el-descriptions-item>
          <el-descriptions-item label="所属机构">{{
              info.agency.name
            }}</el-descriptions-item>
        </el-descriptions>
        <span>配置车辆 :</span>
        <el-select
            v-model="carData[0]"
            placeholder="请选择"
            @change="changeCar"
        >
          <el-option
              v-for="item in carlist"
              :key="item.id"
              :label="item.licensePlate"
              :value="item"
          >
          </el-option>
        </el-select>
        <el-table :data="carData" style="width: 100%">
          <el-table-column prop="licensePlate" label="车牌号码">
          </el-table-column>
          <el-table-column
              prop="workStatus"
              label="车辆状态"
              :formatter="carformatter"
          >
          </el-table-column>
          <el-table-column label="操作">
            <el-link type="warning">查看</el-link>
            <el-link type="danger">删除</el-link>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>

import {getdriveApi, search} from "@/api/drive";
import {gettreeapi} from "@/api/wangdian";

export default {
  name: "drIver",
  data() {
    return {
      form: {
        account: "",
        name: "",
        phone: "",
        agentId: "",
      },
      options: [],
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      tableData: [],
      page: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
      carlist: [],
      carData: [{}],
      info: {
        userId: "",
        name: "",
        mobile: "",
        agency: {},
      },
    };
  },
  created() {
    this.getdrive()
    this.gettreeList()
  },
  methods: {
    async gettreeList() {
      const res1 = await gettreeapi()
      const items=JSON.parse(res1.data)
      // console.log(items)
      this.options=items
    },
    //获取列表数据
    async getdrive () {
      const res = await getdriveApi(this.page)
      this.tableData=res.data.items
      this.total=+res.data.counts
    },
    async hanlepagesiz(e) {
      this.page.pageSize=e
      const res = await getdriveApi(this.page)

      this.tableData=res.data.items
    },
    add() {},
    close() {},
    async handleCurrentChange(e) {
      console.log(e)
      this.page.page=e
      const res = await getdriveApi(this.page)
      this.tableData=res.data.items
    },
    handleChange() {},
    async search() {
      const res =await search({...this.page,...this.form})
      this.tableData=res.data.items
    },
    white() {
      this.form={},
          this.getdrive()
    },
    look(id) {
      this.$router.push({
        path:'/transit/driver-detail',
        query:{
          id:id
        }
      })
    },
    formatter() {},
    changeCar() {},
    carformatter() {},
  },
};
</script>

<style></style>
